<template>
  <div class="user-cernter">
    <div class="user-info">
      <x-header :left-options="{backText: ''}" :title="$route.name">
        <!-- <router-link to="/" slot="right"> <a class="fa fa-home fa-15x"></a> </router-link> -->
      </x-header>
      <div class="out-btn-box">
        <span @click="accountLogout">退出</span>
        <i>|</i>
        <span @click="editRouter">修改密码</span>
      </div>
      <div class="user-info-detail">
        <div class="user-info-img">
          <div class="user-info-avater"><img :src="(userMsg.user && userMsg.user.photo)?`${__ctx}/sys/sysFile/download?fileId=${userMsg.user.photo}`:imgUrl" /></div>
          <img class="goldmedal" :src="require('@/assets/goldmedal.png')" />
        </div>
        <div class="user-info-box">
          <p class="user-info-title">
            <span>{{ userMsg.user && userMsg.user.username }}</span>
            <span>{{ userMsg.user && userMsg.user.fullname }}</span>
          </p>
          <div class="user-info-show">
            <span>{{ userMsg.currentOrg && userMsg.currentOrg.groupName }}</span>
            <!-- <div class="myPopover" v-if="orgList.length > 0">
              <span @click="IsShowOrgList = !IsShowOrgList"
                >部门
                <img
                  :src="imgArrow"
                  :class="IsShowOrgList ? 'imgArrow downImg' : 'imgArrow'"
                />
              </span>
              <ul class="my-group-radio" v-if="IsShowOrgList">
                <div @click="IsShowOrgList = false" class="my-group-mark"></div>
                <li
                  v-for="({ groupName, groupId }, index) in orgList"
                  :key="index"
                  :class="groupIdActive == groupId && 'active'"
                  @click="orglistClick(groupId,groupIdActive == groupId)"
                >
                  {{ groupName }}
                </li>
              </ul>
            </div>
            <span>{{ userMsg.currentOrg && userMsg.currentOrg.groupName }}</span> -->
          </div>
        </div>
        <div class="user-info-switch">
          <div @click="showModal = true"><!-- <van-icon name="exchange" />-->机构切换</div>
        </div>
      </div>
      <div class="my-group" v-if="supportOA">
        <div class="my-group-box">
          <router-link :to="{ path:'/bpm/messageList' }">
            <label class="my-group-label">
              <img :src="require('@/assets/bell.png')" />
              <badge
                v-if="MsgNumber > 0"
                :text="MsgNumber"
                ></badge>
            </label>
            <marquee class="my-marquee">
              <marquee-item v-for="({ title,id }, index) in marqueeData" :key="index">
                <p class="my-marquee-item">{{ title }}</p>
              </marquee-item>
            </marquee>
          </router-link>
        </div>
      </div>
    </div>
    <div class="nav-box">
      <div class="nav-item-box">
        <div
          class="nav-item"
          v-for="(item, index) in userMenuList"
          :key="index"
        >
          <div class="nav-item-title">
            <h3>{{ item.name }}</h3>
          </div>
          <div class="nav-navList-box">
            <ul class="nav-navList-ul">
              <li v-for="(child, indexKey) in item.children" :key="indexKey" class="nav-navList-li">
                <router-link :to="child.path">
                  <i
                    :class="`fa ${child.icon}`"
                    :style="`background-color:${bgColor[index%5][indexKey%8]};box-shadow: 0 3px 7px ${bgColor[index%5][indexKey%8]};`"
                  ></i>
                  <p class="nav-label">{{ child.name }}</p>
                  <!-- <p
                    class="nac-num"
                    v-if="flowCounts.todoTask > 0 && child.name == '待办事项'"
                  >
                    共{{ flowCounts.todoTask }}项
                  </p> -->
                  <!-- <p
                    class="nac-num"
                    v-if="
                      flowCounts.copyMeCount > 0 && child.name == '我的抄送'
                    "
                  >
                    共{{ flowCounts.copyMeCount }}项
                  </p> -->
                  <badge
                    :text="Number(flowCounts.todoTask)"
                    v-show="flowCounts.todoTask > 0 && child.name == '待办事项'"
                  ></badge>
                  <badge
                  :text="Number(flowCounts.copyMeCount)"
                    v-show="
                      flowCounts.copyMeCount > 0 && child.name == '我的抄送'
                    "
                  ></badge>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- <group-title>提示：部分任务不支持移动端办理，请移步PC端处理 </group-title> -->
    <gz-modal v-model="showModal" type="picker" :pickerData="pickerData" :title="'机构'" @confirm="confirmFn"></gz-modal>
  </div>
</template>

<script>
import Vue from "vue";
import setting from "@/setting";
import { NavBar, Icon } from 'vant';
import {
    gzModal
  } from '@/components/customize'
export default {
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    gzModal
  },
  created: function() {
    this.getNotifyData();
    //将权限放到缓存中，提前拿出来。防止获取当前用户信息等待时间太长。每次进首页再更新下
    if (window.localStorage) {
      var userMsgJson = localStorage.getItem("userMsg");
      if (userMsgJson) {
        try {
          this.userMsg = JSON.parse(userMsgJson);
          this.handleUserMenu();
        } catch (error) {}
      }
    }
    this.getMsgNumber();
    this.getData();
  },
  methods: {
    getData() {
      var defer = this.baseService.postForm(
        this.__ctx + "/org/userResource/userMsg",
        { system: "mobile" }
      );
      defer.then(data => {
        if (!data.isOk) {
          if (data.code === "401") {
            if (setting.supportWxOauth2) {
              this.toLogin();
            } else {
              // Vue.toLogin(this.getData);
            }
          }
        } else {
          this.userMsg = data.data;
          localStorage.setItem("userMsg", JSON.stringify(data.data));
          this.handleUserMenu();
          this.getFlowCounts();
        }
        this.getSystemColor();
      });
    },
    // 获取色系
    getSystemColor() {
      let defer = this.baseService.postForm(this.__ctx+"/plugin/mobileHome/getSystemColor");
      defer.then(res => {
        if (res.isOk) {
						// document.querySelector("html").setAttribute("class", "orangeSeries");  //橙色系
						// document.querySelector("html").setAttribute("class", "blueSeries");  //蓝色系
						document.querySelector("html").setAttribute("class", res.data);
            localStorage.setItem("systemColor", res.data);
					}
      });
    },
    editRouter() {
      this.$router.push({
        path: "/homeEdit",
        name: "HomeEdit",
        params: { user: this.userMsg.user }
      });
    },
    handleUserMenu() {
      let _data = this.userMsg;
      this.userMenuList = _data.userMenuList;
      this.orgList = _data.orgList; //组织架构IsShowOrgList
      this.groupIdActive = _data.currentOrg && _data.currentOrg.groupId;
      var arr = [];
      for(var i in this.orgList){
        arr.push(this.orgList[i])
        arr[i].text = this.orgList[i].groupName
      }
      this.pickerData.columns[0].values = arr;
    },
    // 切换支行
    confirmFn(e){
      if(e[0].groupId == this.groupIdActive){
        return this.$vux.toast.text("已是当前部门，无需切换！");
      }

      this.groupIdActive = e[0].groupId;
      this.IsShowOrgList = false;
      let getDefer = this.baseService.postForm(
        this.__ctx + "/userResource/changeOrg", {orgId: e[0].groupId}
      );
      getDefer.then(data => {
        if (data.isOk) {
          this.$vux.toast.text(data.msg || "切换部门成功");
          this.getData();
          this.showModal = false;
        } else {
          this.$vux.toast.show({
            type: "warn",
            text: data.msg
          });
        }
      });
    },
    getFlowCounts() {
      var defer = this.baseService.postForm(
        this.__ctx + "/bpm/my/getMyFlowCounts",
        {}
      );
      defer.then(data => {
        this.flowCounts = data.data;
      });
    },
    accountLogout() {
      let getDefer = this.baseService.postForm(this.__ctx + "/logout");
      let _this = this;
      getDefer.then(data => {
        if (data.isOk) {
          this.$vux.toast.show({
            text: data.msg || "退出成功！",
            onHide() {
              _this.$router.push("/login");
            }
          });
        } else {
          this.$vux.toast.show({
            type: "warn",
            text: data.msg
          });
        }
      });
    },
    logout() {
      window.close();
      let getDefer = this.baseService.postForm(
        this.__ctx + "/userResource/changeOrg", {orgId: id}
      );
    },
    toLogin() {

    	if (setting.supportWxOauth2==='weixin' || setting.supportWxOauth2=='weixinqiye'){
	    	let appId = setting.weixinAppId;
	       	let redirect_uri = setting.redirect_uri;
	        let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${encodeURI(redirect_uri)}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
	        window.location.href = url
    	}else if(setting.supportWxOauth2==='dingding'){
    		this.$router.push('/abDing');
    	}

    },
    orglistClick(id, bol) {
      //切换部门
      if (bol) {
        return this.$vux.toast.text("已是当前部门，无需切换！");
      }
      this.groupIdActive = id;
      this.IsShowOrgList = false;
      let getDefer = this.baseService.postForm(
        this.__ctx + "/userResource/changeOrg", {orgId: id}
      );
      getDefer.then(data => {
        if (data.isOk) {
          this.$vux.toast.text(data.msg || "切换部门成功");
          this.getData();
        } else {
          this.$vux.toast.show({
            type: "warn",
            text: data.msg
          });
        }
      });
    },
    // getNotifyData() {
    //   //获取3条公告信息
    //   let defer = this.baseService.postForm(
    //     this.__ctx + "/oa/oANotify/queryCustomerNotify",
    //     { offset: 0, limit: 3 }
    //   );
    //   defer.then(data => {
    //     let { isOk, rows } = data;
    //     if (isOk) {
    //       this.marqueeData = rows;
    //     } else {
    //       this.$vux.toast.show({
    //         type: "warn",
    //         text: data.msg
    //       });
    //     }
    //   });
    // },
    getNotifyData() {
      //获取3条未读信息
      let defer = this.baseService.postForm(
        this.__ctx + "/oa/oAInstationMsg/list",
        { offset: 0, limit: 3, status_$VEQ: 1 }
      );
      defer.then(data => {
        let { isOk, rows } = data;
        if (isOk) {
          this.marqueeData = rows;
        } else {
          this.$vux.toast.show({
            type: "warn",
            text: data.msg
          });
        }
      });
    },
    // 获取消息数量
    getMsgNumber() {
      //获取3条公告信息
      let defer = this.baseService.postForm(
        this.__ctx + "/oa/oAInstationMsg/totalNumber", {userId: this.userMsg.user.userId}
      );
      defer.then(res => {
        let { isOk, data } = res;
        if (isOk) {
          this.MsgNumber = data;
        } else {
          this.$vux.toast.show({
            type: "warn",
            text: res.msg
          });
        }
      });
    }
  },
  name: "Home",
  data() {
    return {
      supportOA : setting.supportOA,
      flowCounts: {},
      userMsg: { user: {} },
      userMenuList: [],
      msg: "Welcome to Your Vue.js App",
      sqlList: [],
      customerSqlList: [],
      imgUrl: require("../assets/user/user.svg"),
      imgArrow: require("../assets/user/arrow.svg"),
      orgList: [], //部门数据
      groupIdActive: "", //选中的部门
      IsShowOrgList: false,
      bgColor: [
        {
          0: "#2f54eb",
          1: "#722ed1",
          2: "#eb2f96",
          3: "#ff7a45",
          4: "#ffa940",
       	  5: "#2f54eb",
          6: "#722ed1",
          7: "#eb2f96",
          8: "#ff7a45",
        },
        {
          0: "#f5222d",
          1: "#52c41a",
          2: "#fa8c16",
          3: "#f759ab",
          4: "#9254de",
       	  5: "#2f54eb",
          6: "#722ed1",
          7: "#eb2f96",
          8: "#ff7a45",
        },
        {
          0: "#d48806",
          1: "#d4b106",
          2: "#7cb305",
          3: "#597ef7",
          4: "#597ef7",
          5: "#f5222d",
          6: "#52c41a",
          7: "#fa8c16",
          8: "#f759ab",
        },
        {
          0: "#52c41a",
          1: "#fa541c",
          2: "#1890ff",
          3: "#73d13d",
          4: "#ffc53d",
       	  5: "#2f54eb",
          6: "#722ed1",
          7: "#eb2f96",
          8: "#ff7a45",
        },{
            0: "#2f54eb",
            1: "#722ed1",
            2: "#eb2f96",
            3: "#ff7a45",
            4: "#ffa940",
        	5: "#2f54eb",
            6: "#722ed1",
            7: "#eb2f96",
            8: "#ff7a45",
          }
      ],
      marqueeData: [],
      pickerData: {
        titles: [''],
        columns: [{
          values: []
        }],
      },
      showModal: false,
      MsgNumber:'',//消息数量
    };
  }
};
</script>

<style scoped lang="less">
.user-cernter {
  background-color: #f0f0f0;
  .user-info {
    position: relative;
    background-image:url("../assets/home_bg.png");
    background-size: 100% 100%;
    width: 100%;
    height: 22em;
    .out-btn-box {
      height: 5em;
      width: 100%;
      line-height: 5em;
      text-align: right;
      color: #fff;
      position: absolute;
      top: 3em;
      left: 0;
      z-index:1;
      i {
        font-style: normal;
      }
      span {
        font-size: 1.1em;
        letter-spacing: 1.5;
        padding: 0.5em;
        margin-right: 0.5em;
      }
    }

    .vux-header{
      background-color: transparent;
      /deep/.vux-header-left .left-arrow::before{
        border: 2px solid #fff!important;
        border-width: 2px 0 0 2px!important;
      }
      .vux-header-right a{
        color: #fff;
      }
      /deep/.vux-header-title{
        color: #fff!important;
      }
    }
    .user-info-detail {
      padding: 4em 2.8em;
      position: relative;
      .user-info-img {
        display: inline-block;
        width: 7em;
        height: 7em;
        border-radius: 50%;
        background-color: #fff;
        position: relative;

        .user-info-avater{
          width: calc(~"7em - 4px");
          height: calc(~"7em - 4px");
          border-radius: 50%;
          overflow: hidden;
          border: 2px solid #fff;
          img {
            width: 100%;
            border-radius: 50%;
          }
        }

        .goldmedal{
          width: 1.5em;
          position: absolute;
          bottom: -2px;
          right: 5px;
        }
      }
      .user-info-box {
        display: inline-block;
        width: calc(~"100% - 9.5em");
        margin-left: 1.5em;
        vertical-align: top;
        height: 7em;
        padding: 0.8em 0;
        .user-info-title {
          color: #fff;
          margin-bottom: 0.2em;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          span:first-child{
            font-size: 1.67em;
          }
          span:last-child{
            font-size: 1.17em;
            color: rgba(255,255,255,0.8);
            margin-left: 0.5em;
          }
        }
        .user-info-show {
          color: rgba(255,255,255,0.8);
          font-size: 1.17em;
          .myPopover {
            display: inline-block;
            position: relative;
            .my-group-radio {
              position: absolute;
              top: calc(~"1.3em + 8px");
              left: 0;
              background-color: #fff;
              color: #262626;
              width: 150px;
              border-radius: 3px;
              z-index: 11;
              border: 1px solid #bae7ff;
              padding: 0 10px;
              font-size: 1em;
              &::after {
                content: "";
                position: absolute;
                left: 15px;
                margin-left: -4px;
                top: -4px;
                width: 8px;
                height: 8px;
                border-top: 1px solid #bae7ff;
                border-left: 1px solid #bae7ff;
                background-color: #fff;
                z-index: 10;
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
              }
              li {
                &:last-child {
                  border-bottom: 0;
                }
                padding: 10px;
                border-bottom: 1px dotted #bae7ff;
                color: #8c8c8c;
                &.active {
                  color: #40a9ff;
                  background: url("../assets/user/active.svg") no-repeat right
                    10px center / 20px;
                }
              }
              .my-group-mark {
                position: fixed;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: -1;
              }
            }
            .imgArrow {
              width: 12px;
              &.downImg {
                transform: rotate(180deg);
              }
            }
          }
        }
      }
      .user-info-switch{
        height: 2.6em;
        width: 6em;
        position: absolute;
        right: 0;
        top: 4em;
        font-size: 1em;
        color: #fff;
        background: rgba(255,255,255,0.3);
        border-top-left-radius: 1.3em;
        border-bottom-left-radius: 1.3em;
        div{
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .van-icon{
          font-size: 1.5em;
          margin-right: 0.1em;
        }
      }
    }
    .my-group {
      position: absolute;
      bottom: -3em;
      width: 100%;
      left: 0;
      right: 0;
      background-color: #fff;
      border-top-left-radius: 2.5em;
      border-top-right-radius: 2.5em;
      // height: 5em;
      // line-height: 5em;

      .my-group-box{
        width: 93%;
        margin: 15px auto;
        background-color: #FFEFE6;
        height: 4em;
        line-height: 4em;
        border-radius: 10px;
        .my-group-label {
          display: inline-block;
          font-size: 1.4em;
          width: 4em;
          vertical-align: top;
          text-align: center;
          color: #003a8c;
          position: relative;
          img{
            width: 1.5em;
            margin-top: 0.65em;
          }
          .vux-badge {
            position: absolute;
            left: 33px;
            top: 6px;
          }
        }
        .my-marquee {
          display: inline-block;
          width: calc(~"100% - 7em");
          .my-marquee-item {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 98%;
            color: #FF6619;
            font-size: 1.2em;
            padding-right: 5px;
          }
        }
      }
    }
  }
  .nav-box {
    width: 93%;
    padding: 21px 3.5% 0;
    background: #ffffff;
    .nav-item-box {
      padding-top: 1px;
      .nav-item {
        border-radius: 5px;
        background-color: #fff;
        margin-top: 15px;
        .nav-item-title {
          // border-bottom: 1px solid #dcdee2;
          padding: 10px;
          h3 {
            color: #1D2129;
            font-size: 1.4em;
            line-height: 2em;
            font-weight: 700;
            font-family: initial;
          }
        }
        .nav-navList-box {
          // padding-top: 20px;
          .nav-navList-ul {
            *zoom: 1;
            &::after {
              content: "";
              display: block;
              height: 0;
              clear: both;
              visibility: hidden;
            }
            .nav-navList-li {
              float: left;
              margin-bottom: 15px;
              a {
                display: block;
                width: 90px;
                height: 110px;
                text-align: center;
                position: relative;
                .fa {
                  width: 55px;
                  height: 55px;
                  color: #fff;
                  border-radius: 50%;
                  position: relative;
                  margin-top: 10px;
                  &::before {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                  }
                }
                .nav-label {
                  font-size: 1.2em;
                  line-height: 1.3;
                  color: #86909C;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                  width: 80%;
                  margin: 0 auto;
                  padding: 3px 0;
                }
                .nac-num {
                  font-size: 1em;
                  color: #808695;
                }
                .vux-badge {
                  position: absolute;
                  right: 6px;
                  top: 6px;
                }
              }
            }
          }
        }
      }
    }
  }
}
.grid-center {
  display: block;
  text-align: center;
  color: #666;
}
.weui-grids {
  background-color: #fff;
}
</style>
